<template>
	<view class="container" style="padding-bottom: 200rpx;">
		<view v-for="(item, index) in itemList" :key='index' 
		style="display: flex;flex-direction: row;;background-color: #fff;align-items: center;width: 710rpx;margin-left: 20rpx;margin-top: 4rpx;padding: 16rpx 0;">
			<view style="margin: 0 16rpx;" @click="selectItem(item)">
				<image v-if="!item.select" style="width: 42rpx;height: 42rpx" src="@/static/common/pay/order_pay_unsel.png" mode=""></image>
				<image v-if="item.select" style="width: 42rpx;height: 42rpx" src="@/static/common/pay/order_pay_sel.png" mode=""></image>
			</view>
			<view style="display: flex;flex-direction: row;" @click="itemTap(item)">
				<image :src="item.skuModel.coverUrl||item.skuModel.coverUrl" mode='aspectFill' style="width: 160rpx;height: 160rpx;"></image>
				<view style="margin-left: 16rpx;width: 460rpx;">
					<view style="font-size: 30rpx;color: #000;" class="limitLineNumOfTwo">{{item.itemModel.name}}</view>
					<view style="font-size: 26rpx;margin-top: 10rpx;color: #666;" class='limitLineNumOfOne'>规格：{{item.specs_sel}}</view>
					<view style="margin-top: 12rpx;display: flex;flex-direction: row;align-items: center;justify-content: space-between;margin-right: 12rpx;" @click.stop="()=>{}">
						<view style="color: #fa3534;margin-top: 10rpx;"><text></text>¥{{item.skuModel.sellingPrice}}</view>
						<uni-number-box v-model="item.payCount" :min="1" :max="100" @change="payCountChange(item)"></uni-number-box>
					</view>
				</view>
			</view>
		</view>
		<goods-nav-bar>
			<view slot="button" style='position: absolute;left: 30rpx;'>
				<view style="display: flex;flex-direction: row;align-items: center;" @click="selectAll">
					<image v-if="!isSelectAll" style="width: 42rpx;height: 42rpx" src="@/static/common/pay/order_pay_unsel.png" mode=""></image>
					<image v-if="isSelectAll" style="width: 42rpx;height: 42rpx" src="@/static/common/pay/order_pay_sel.png" mode=""></image>
					<view style="margin-left: 10rpx;">全选</view>
					<view style="margin-left: 20rpx;">
						<jc-price :value='realPay' valueSize='40'></jc-price>
					</view>
					
				</view>
			</view>
			<view slot="button">
				<view @click='deleteTap' style="margin-left: 10rpx;color: #999;">删除</view>
			</view>
			<view slot="button" style="margin-left: 30rpx;">
				<u-button @click='payTap' :custom-style='handleBtnPay' shape='circle'>去下单</u-button>
			</view>
		</goods-nav-bar>
		<!-- <jcTabbarItem :current="currentTabbarIndex" :list='dynamicTabbar'></jcTabbarItem> -->
	</view>
</template>

<script>
	import {order} from '@/api/order.js'
	import {common} from '@/api/common.js'
	import jcButton from "@/components/jc-button/jc-button.vue"
	import goodsNavBar from '@/components/goodsNavBar/goodsNavBar.vue'
	import {stockCart} from '@/api/stockCart.js'
	export default {
		components:{jcButton, goodsNavBar},
		data() {
			return {
				page: 1,
				size: 100,
				totalPage: 0,
				showEmpty: false,
				isLastPage: false,
				dynamicTabbar: [],
				currentTabbarIndex: 0,
				userInfo: {},
				itemList: [],
				tabTitle: ['已出账', '待打款', '已打款'],
				noticeList:['通知：近期提现人数较多，到账时间会可能延迟，敬请谅解！'],
				value1: 1,
				value2: 2,
				currentIncomeCate: '',
				handleBtnPay:{
					width: '200rpx',
					height: '80rpx',
					marginRight: '20rpx',
					fontSize: '26rpx',
					color: '#FFFFFF',
					backgroundColor: '#FC5E53'
				},
				realPay: 0,
				isSelectAll: false,
				shopCartScene: 'generay',
			}
		},
		onLoad() {
			this.dynamicTabbar = this.$store.getters.getDynamicTabbar
			var	tabbars = this.dynamicTabbar.filter(item=>item.key == this.$Route.name)
			this.currentTabbarIndex = tabbars.length>=1?tabbars[0].sort:'0'
		},
		onShow() {
			this.userInfo = this.$storage.getStorageDataSync(this.$store.state.userInfo)
			this.loadData()
		},
		onPullDownRefresh() {
			this.loadData()
		},
		watch:{
		  /*监听全选事件*/
		  itemList:{
		    handler(value){
		      var _this = this;
		      var count=0;
		      for(var i=0;i<value.length;i++){
		        if(value[i].select==true){
		          count++;
		        }
		      }
		      //如果子集全部选中，全选按钮设置选中状态
		      if(count==value.length){
		        _this.isSelectAll=true;
		      }else{
		        _this.isSelectAll=false;
		      }
			  console.log('购物车数据变动')
			  this.countMoney()
		    },
		    deep: true
		  },
		},
		methods: {
			loadData(){
				this.page = 1
				this.stockCartList()
			},
			back(){
				uni.switchTab({
					url: '/pages/mine/mine'
				})
			},
			// 数量改变
			payCountChange(item){
				// this.countMoney()
				console.log('数量改变', item)
				common.operateActionPost('/merchant/shopCart/shopCartCountChange/', {
					obj_id: item.id,
					payCount: item.payCount
				}).then(res => {
					if(res.data.code == 10000){
						
					}
				})
			},
			itemTap(item){
				this.$Router.push({
					name: 'itemDetail',
					params: {
						obj_id: item.item
					}
				})
			},
			selectAll(){
				this.isSelectAll = !this.isSelectAll
				if(this.isSelectAll){
					for(var item of this.itemList){
						this.$set(item, 'select', true)
					}
				}else{
					for(var item of this.itemList){
						this.$set(item, 'select', false)
					}
				}
			},
			// 选中
			selectItem(item){
				console.log('item', item)
				if(item.select){
					this.$set(item, 'select', false)
				}else{
					this.$set(item, 'select', true)
				}
			},
			// 计算金额
			countMoney(){
				var realPay = 0
				for(var item of this.itemList){
					if(item.skuModel.sellingPrice && item.select){
						realPay = this.$count.add(realPay, this.$count.mul(item.skuModel.sellingPrice, item.payCount))
					}
				}
				this.realPay = realPay
			},
			// 删除操作
			deleteTap(){
				var selectItemListIds = []
				for(var item of this.itemList){
					if(item.select){
						selectItemListIds.push(item.id)
					}
				}
				if(selectItemListIds.length==0){
					this.$show.showMessage('请选择商品')
					return
				}
				var _this = this
				uni.showModal({
					content: '是否确认删除',
					confirmText: '是',
					cancelText: '否',
					complete(res) {
						if(res.confirm){
							common.operateActionPost('/merchant/shopCart/deleteAction/', {
								obj_ids: selectItemListIds
							}).then(res => {
								if(res.data.code == 10000){
									uni.showToast({
										title: '删除成功',
										icon:'none'
									})
									_this.loadData()
								}
							})
						}
					}
				})
			},
			// 创建订单
			payTap(){
				var selectItemList = []
				for(var item of this.itemList){
					if(item.select){
						selectItemList.push(item)
					}
				}
				if(selectItemList.length==0){
					this.$show.showMessage('请选择商品')
					return
				}
				var shopCartItems = []
				for(var item of selectItemList){
					shopCartItems.push({
						shopCartId: item.id,
						item: item.item,
						itemName: item.itemModel.name,
						sku: item.sku,
						specValues: item.skuModel.specValues,
						payCount: item.payCount,
						priceModel: item.priceModel,
						coverUrl: item.skuModel.coverUrl
					})
				}
				var priceModel = {
					sellingPrice: this.$count.mul(this.realPay, 1),
				}
				var params = {
					orderItemList: encodeURIComponent(JSON.stringify(shopCartItems)),
					priceModel: encodeURIComponent(JSON.stringify(priceModel)),
				}
				params.scene = this.shopCartScene
				this.$Router.push({
					name: 'createOrder',
					params: params
				})
				return
				// 校验采购订单
				stockCart.verifyStockCart({
					orderItemList: orderItemList
				}).then(res => {
					if (res.data.code == 10000) {
						this.$Router.push({
							name: 'createOrderForStock',
							params: {
								orderItemList: encodeURIComponent(JSON.stringify(selectItemList)),
								realPay: this.realPay
							}
						})
					}else if(res.data.code == 10001){
						for(var item of this.itemList){
							for(var stockCartId of res.data.data){
								if(stockCartId == item.id){
									this.$set(item, 'verifyMessee', '库存不足')
									continue
								}
							}
						}
						this.$show.showMessage('库存不足，请调整下单数量')
					}
				})
			},
			stockCartList(){
				var params = {
					page: this.page,
					size: this.size
				}
				common.operateActionGet('/merchant/shopCart/', {
					scene: this.shopCartScene,
					user: this.$storage.getStorageDataSync(this.$store.state.userInfo).id
				}).then(res => {
					uni.stopPullDownRefresh();
					if (res.data.code == 10000) {
						if(this.page == 1){
							this.itemList = []
						}
						var list = res.data.data.list
						for(var item of list){
							item.verifyMessee = ''
							if(item.sku){
								var specs_sel = ''
								for(var val of JSON.parse(item.skuModel.specValues)){
									specs_sel = specs_sel + val.name + '，'
								}
								specs_sel = specs_sel.substring(0, specs_sel.length-1)
								item.specs_sel = specs_sel
							}
							
						}
						this.itemList = [...this.itemList, ...list]
						this.showEmpty = this.itemList.length<1
						if (res.data.data.next) {
							this.page += 1
						} else {
							this.isLastPage = true
						}
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.noticeView{
		// position: fixed;
		// left: 0;
		// top: 0;
		z-index: 10;
	}
	.top{
		width: 750rpx;
		height: 240rpx;
		background-color: #d4a781;
	}
	.main{
		position: relative;
		top: -150rpx;
	}
	.otherBalance{
		padding-top: 80rpx;
		width: 100%;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-around;
		.item{
			display: flex;
			flex-direction: column;
			align-items: center;
			.title{
				font-size: 30rpx;
				color: #FFFFFF;
			}
			.timeLenght{
				font-size: 34rpx;
				font-weight: bold;
				color: #FFFFFF;
			}
		}
	}
	.headView{
		display: flex;
		flex-direction: column;
		align-items: center;
		background-color: #FFFFFF;
		margin: 0 30rpx;
		padding: 40rpx 0;
		border-radius: 20rpx;
		box-shadow:0 8rpx 16rpx rgba(0, 0, 0, 0.08);
		.totalBalance{
			display: flex;
			flex-direction: column;
			align-items: center;
			.title{
				font-size: 30rpx;
				color: #999999;
			}
			.timeLenght{
				font-size: 50rpx;
				font-weight: bold;
			}
		}
		.otherBalance{
			margin-top: 40rpx;
			width: 100%;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-around;
			.item{
				display: flex;
				flex-direction: column;
				align-items: center;
				.title{
					font-size: 30rpx;
					color: #999999;
				}
				.timeLenght{
					font-size: 34rpx;
					font-weight: bold;
				}
			}
		}
		
	}
	
	.CZTX{
		width: 100%;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-around;
		margin-top: 20rpx;
	}
	.itemCate{
		display: flex;
		flex-direction: row;
		margin-top: 30rpx;
		flex-wrap: wrap;
		.item{
			margin-left: 30rpx;
			width: 330rpx;
			height: 280rpx;
			background-color: #FFFFFF;
			border-radius: 16rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			margin-bottom: 30rpx;
		}
	}
</style>
